<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片裁剪上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="/libs/jquery.js"></script>
<script src="/libs/cropper/cropper.min.js"></script>
<link rel="stylesheet" href="/libs/cropper/cropper.min.css">
<link rel="stylesheet" href="css/file.css">
</head>

<body>
<div id="imageContainer"> <a class="up_img xztp" href="javascript:;">
  <img src="ico/add.svg"> <b>选择上传图片</b> </a> 
  </div>
<div class="toolbar">
  <div class="right">
    <button id="upload" class="button">确定上传</button>
  </div>
  <div class="left">
    <input type="file" id="imageInput" accept="image/*">
    <button class="button xztp" >选择图片</button>
  </div>
  <div class="con"> <a href="javascript:;" data-width="16" data-height="9">16:9</a> <a href="javascript:;" data-width="4" data-height="3">4:3</a> <a href="javascript:;" data-width="1" data-height="1" class="on">1:1</a> <a href="javascript:;" data-width="2" data-height="3">2:3</a> <a href="javascript:;" data-width="NaN" data-height="NaN" style="border-right-width:0;">自由比例</a> </div>
</div>
<script>
  function get(name){name=name.replace(/[]/,"\[").replace(/[]/,"\[").replace(/[]/,"\\\]");var regexS="[\\?&]"+name+"=([^&#]*)";var regex=new RegExp(regexS);var results=regex.exec(window.self.location.href);if(results==null)return"";else{return results[1]}};
  dir=get('u'); 

			
    $(document).ready(function () {
        const imageInput = $('#imageInput');
        const imageContainer = $('#imageContainer');
        const upload = $('#upload');

        let cropper;

        $('.xztp').on('click', function () {
            imageInput.click();
        });
 
   $('.con a').on('click', function () {
	   
	    $('.con a').removeClass('on');
	    $(this).addClass('on');
        const width = $(this).data('width');
        const height = $(this).data('height');
        setAspectRatio(width, height);
		
    });
	
        imageInput.on('change', function (event) {
			
            const file = event.target.files[0];

            const reader = new FileReader();

            reader.onload = function (e) {
                imageContainer.html('<img id="croppedImage" src="' + e.target.result + '">');
                const image = document.getElementById('croppedImage');
                cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode: 1,
                    dragMode: 'move',
                    autoCropArea: 0.8,//0.8 表示裁剪区域将占据图像面积的 80%。
                    scalable: true,
                    rotatable: true,
					// 设置裁剪区域的宽度和高度
					cropBoxWidth: 200,
					cropBoxHeight: 200
                });
            };

            reader.readAsDataURL(file);
        });

        function setAspectRatio(width, height) {
            if (cropper) {
                cropper.setAspectRatio(width / height);
            }
        }

        // 上传按钮点击事件
        upload.on('click', function () {
            if (cropper) {
				index=parent.layer.getFrameIndex(window.name);
                const croppedCanvas = cropper.getCroppedCanvas();
                const croppedImageDataURL = croppedCanvas.toDataURL();
                const blob = dataURItoBlob(croppedImageDataURL);

                const formData = new FormData();
                formData.append('image', blob);
                
                $.ajax({
                    url: 'api/?l=upimg&ml='+dir,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
					  parent.layer.close(index); 
                      console.log(response);
                    },
                    error: function (error) {
                      console.error(error);
                    }
                },'json');
            }
        });

        function dataURItoBlob(dataURI) {
            const byteString = atob(dataURI.split(',')[1]);
            const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
            const ab = new ArrayBuffer(byteString.length);
            const ia = new Uint8Array(ab);
            for (let i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], { type: mimeString });
        }
    });
</script>
</body>
</html>